<template>
  <div style="background: #fff">
    <div class="title">
      <div>用户列表</div>
    </div>
    <div style="padding: 1.875rem">
      <el-form :inline="true">
        <el-form-item label="">
          <el-input
            v-model="query.name"
            placeholder="单位/社会信用代码"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择分类">
          <el-select v-model="query.one_id" placeholder="请选择分类" clearable>
            <el-option
              v-for="item in cate"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getData(true)">查询</el-button>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="exportCompany">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="data" stripe style="width: 100%; margin-bottom: 1.875rem">
      <!-- <el-table-column prop="id" label="id"></el-table-column> -->
      <el-table-column prop="name" label="账号"></el-table-column>
      <el-table-column prop="pwd" label="密码"></el-table-column>
      <el-table-column prop="phone" label="手机"></el-table-column>
      
      <el-table-column prop="company" label="单位"></el-table-column>
      <el-table-column prop="code" label="信用代码"></el-table-column>
      <el-table-column label="公开二维码">
        <template slot-scope="scope">
          <el-image
            :src="
              scope.row.public_code +
              '?imageView2/1/w/50/h/50/format/webp/q/75|imageslim'
            "
            :preview-src-list="[scope.row.public_code]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="营业执照">
        <template slot-scope="scope">
          <el-image
            :src="
              scope.row.license +
              '?imageView2/1/w/50/h/50/format/webp/q/75|imageslim'
            "
            :preview-src-list="[scope.row.license]"
          >
          </el-image>
        </template>
      </el-table-column>
      <!-- <el-table-column label="身份证正面">
        <template slot-scope="scope">
          <el-image
            :src="
              scope.row.just +
              '?imageView2/1/w/50/h/50/format/webp/q/75|imageslim'
            "
            :preview-src-list="[scope.row.just]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="身份证反面">
        <template slot-scope="scope">
          <el-image
            :src="
              scope.row.back +
              '?imageView2/1/w/50/h/50/format/webp/q/75|imageslim'
            "
            :preview-src-list="[scope.row.back]"
          >
          </el-image>
        </template>
      </el-table-column> -->
      <el-table-column prop="xkzh" label="许可证号">
        <template slot-scope="scope">
          青城卫公证字({{ scope.row.xkzh_year }})第({{ scope.row.xkzh }})号
        </template>
      </el-table-column>
      <el-table-column prop="end_at" label="许可证截止日期"></el-table-column>
      <el-table-column label="许可证">
        <template slot-scope="scope">
          <el-image
            :src="
              scope.row.xkz +
              '?imageView2/1/w/50/h/50/format/webp/q/75|imageslim'
            "
            :preview-src-list="[scope.row.xkz]"
          >
          </el-image>
        </template>
      </el-table-column>
      <!-- <el-table-column label="健康证">
        <template slot-scope="scope">
          <el-image
            :src="
              scope.row.health_photo[0] +
              '?imageView2/1/w/50/h/50/format/webp/q/75|imageslim'
            "
            :preview-src-list="scope.row.health_photo"
          >
          </el-image>
        </template>
      </el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="showEdit(scope.row)"
            >查看档案</el-button
          >
          <!-- <el-button size="small" @click="del(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pages.currentPage"
      :page-sizes="[1, 5, 10, 20]"
      :page-size="pages.per_page"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pages.total"
      style="text-align: center"
    >
    </el-pagination>
    <el-divider></el-divider>
    <div v-if="is_check"> 
      <div class="title">
        <div class="info">基本信息</div>
        
      </div>
      <div class='titleInfo'><span>单位：{{item.company}}    </span><el-divider direction="vertical"></el-divider>    <span>社会信用代码：{{item.code}}</span> </div>
      <div class='titleInfo'><span>注册地址：{{item.address}}    </span><el-divider direction="vertical"></el-divider>    <span>营业面积：{{item.area}}</span> </div>
      <div class='titleInfo'><span>注册街道：{{item.street}}    </span></div>
       <div class='titleInfo'>营业执照：
          <div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.license"
              :preview-src-list="[item.license]"
            >
            </el-image>
          </div></div>
       <div class="title">
        <div class="info">许可证信息</div>
      </div>
       <div class='titleInfo'><span>许可证号: 青城卫公证字({{ item.xkzh_year }})第({{ item.xkzh }})号</span></div>
        <div class='titleInfo'><span>许可证开始日期：{{item.start_at}}    </span><el-divider direction="vertical"></el-divider>    <span>许可证结束日期：{{item.end_at}}</span> </div>
        <div class='titleInfo'>许可证照片：
          <div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.xkz"
              :preview-src-list="[item.xkz]"
            >
            </el-image>
          </div></div>
      <div class="title">
        <div class="info">负责人信息</div>
      </div>
       <div class='titleInfo'><span>负责人：{{item.charge}}    </span><el-divider direction="vertical"></el-divider>    <span>电话：{{item.phone}}</span> </div>
        <div class='titleInfo'>
          
            身份证正面：<div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.just"
              :preview-src-list="[item.just]"
            >
            </el-image>
           
          </div>
          <el-divider direction="vertical"></el-divider> 
           身份证反面：<div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.back"
              :preview-src-list="[item.back]"
            >
            </el-image>
           
          </div>
          </div>
          
       <div class="title">
        <div class="info">职工信息</div>
      </div>
      <div class='titleInfo'><span>职工总数：{{item.workers}}    </span><el-divider direction="vertical"></el-divider>    <span>持健康合格证明人数：{{item.health}}</span> </div>
        <div class='titleInfo'>
          
            健康证照片：<div class="demo-image__preview"  v-for="(item, index) in item.health_photo"
        :key="index">
            <el-image
              style="width: 100px; height: 100px"
              :src="item"
              :preview-src-list="[item]"
            >
            </el-image>
           <el-divider direction="vertical"></el-divider> 
          </div>
          
          </div>
        <div class="title">
        <div class="info">其他信息</div>
      </div>
      <div class='titleInfo'><span>集中空调通风系：{{item.air==1?"是":"否"}}    </span><el-divider direction="vertical"></el-divider> <span>是否承诺制：{{ item.sfcnz == 1 ? "是" : "否" }}</span> </div>

       <div class="title">
        <div class="info">执法文书信息</div>
      </div>
      <div class='titleInfo'>
      执法文书上传：<div class="demo-image__preview"  v-for="(item, index) in document.photo"
        :key="index">
            <el-image
              style="width: 100px; height: 100px"
              :src="item"
              :preview-src-list="[item]"
            >
            </el-image>
           <el-divider direction="vertical"></el-divider> 
          </div>
          </div>
       <div class="title">
        <div class="info">等级评价信息</div>
      </div>

       <div class='titleInfo' style="color:red"><span>得分 ：{{item.point}}    </span><el-divider direction="vertical"></el-divider>    <span>评价：{{item.evaluate}}</span> 
       <el-divider direction="vertical"></el-divider>    <span>核定为：{{item.level}}</span> </div>

    </div>
    
    <!-- <div v-if="is_check">
      <el-card class="box-card">
        <div class="text item">手机:{{ item.phone }}</div>
        <div class="text item">单位:{{ item.company }}</div>
        <div class="text item">社会信用代码:{{ item.code }}</div>
         <div class="text item">负责人:{{ item.charge }}</div>
        <div class="text item">
          身份证正面:
          <div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.just"
              :preview-src-list="[item.just]"
            >
            </el-image>
          </div>
        </div>
        <div class="text item">
          身份证反面:
          <div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.back"
              :preview-src-list="[item.back]"
            >
            </el-image>
          </div>
        </div>
        <div class="text item">
          营业执照:
          <div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.license"
              :preview-src-list="[item.license]"
            >
            </el-image>
          </div>
        </div>
        <div class="text item">
          公开二维码:
          <div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.public_code"
              :preview-src-list="[item.public_code]"
            >
            </el-image>
          </div>
        </div>
        <div class="text item">许可证号: 青城卫公证字({{ item.xkzh_year }})第({{ item.xkzh }})号</div>
        <div class="text item">许可证开始日期:{{ item.start_at }}</div>
        <div class="text item">许可证截止日期:{{ item.end_at }}</div>
         <div class="text item">
          许可证:
          <div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.xkz"
              :preview-src-list="[item.xkz]"
            >
            </el-image>
          </div>
        </div>
        <div class="text item">所属街道:{{ item.street }}</div>
        <div class="text item">注册地址:{{ item.address }}</div>
        <div class="text item">职工总数:{{ item.workers }}</div>
        <div class="text item">持健康合格证明人数:{{ item.health }}</div>
        <div class="text item">
          健康证:
          <div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.health_photo[0]"
              :preview-src-list="item.health_photo"
            >
            </el-image>
          </div>
        </div>
        <div class="text item">营业面积:{{ item.air }}</div>
        <div class="text item">
          集中空调通风系:{{ item.air == 1 ? "是" : "否" }}
        </div>
        <div class="text item">
          是否承诺制:{{ item.sfcnz == 1 ? "是" : "否" }}
        </div>
        <div class="text item">
          执法文书
          <div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="document.photo.length > 0 ? document.photo[0] : ''"
              :preview-src-list="document.photo"
            >
            </el-image>
          </div>
        </div>
      </el-card>
    </div> -->
  </div>
</template>

<script>
import mixin from "../../js/mixin";

export default {
  name: "homePage",
  mixins: [mixin],
  data() {
    return {
      is_check:false,
      is_page: true,
      api_url: "user",
      cate: [],
      document: {
        photo: [],
      },
      item: {},
      query: {
        type: 1,
        state: 2,
        one_id: "",
        name: "",
      },
    };
  },
  components: {},
  mounted() {
    let refresh = localStorage.getItem("refresh");
    if (!refresh) {
      this.$router.go(0);
      localStorage.setItem("refresh", 1);
    }
  },
  created() {
    this.getCate();
    this.getData();
  },
  methods: {
    reset() {
      this.query.one_id = "";
      this.query.name = "";
      this.getData(true);
    },
    getCate() {
      this.global.httpRequest("cate", { p_id: 0 }).then((res) => {
        this.cate = res;
      });
    },
    showEdit(e) {
      this.item = e;
      this.getDocument();
      this.is_check = true
    },

    getDocument() {
      this.global
        .httpRequest("document", { user_id: this.item.id })
        .then((res) => {
          this.document = res;
        });
    },
    exportCompany() {
      window.location.href =
        "https://company.shonemore.com/export?one_id=" +
        this.query.one_id +
        "&name=" +
        this.query.name;
    },
  },
};
</script>

<style scoped>
.title {
  height: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px #efefef solid;
}
.title > div {
  border-left: 0.375rem #2355f5 solid;
  line-height: 1.25rem;
  padding-left: 1.5rem;
  font-weight: 600;
}

.content {
  padding: 1.875rem;
}
.contents {
  padding: 1.875rem;
  display: flex;
  flex-wrap: wrap;
}

.dateTitle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
}
.dateInfo {
  width: 18.5%;
  text-align: center;
  background: #fff;
  color: #6f737a;
  line-height: 3.75rem;
  cursor: pointer;
}
.saleDate {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.625rem;
}
.saleDate > div {
  width: 48.5%;
  padding: 2.5rem 0;
  background: #fff;
}
.saleDate > div > span {
  display: block;
  margin-left: 1.875rem;
  color: #6f737a;
  margin-bottom: 1.5rem;
}
.saleDate > div > div {
  margin-left: 1.875rem;
  color: #333;
  font-size: 1.5rem;
}

.goodsInfo {
  width: 13.5rem;
  padding: 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
}
.goodsInfo > div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

.revenueInfo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.revenueInfo > span {
  color: #6f737a;
  margin-bottom: 1.5rem;
}
.revenueInfo > div {
  color: #333;
  font-size: 2rem;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.titleInfo{
  display: flex;
  align-items: center;
  margin: 2rem 5rem;
  margin-left: 2rem;
}
</style>
